<script setup lang="ts">
  import { computed, reactive, ref } from 'vue'
  import { accountList } from '@/package_tms/api/Home'
  import { onLoad } from '@dcloudio/uni-app'
  import { useNotify } from '@/hooks/web/useNotify/index.js'
  import { timeFormat } from '@/uni_modules/uview-plus';
  import { getPastTimestamp } from '@/utils/tools/time'
  // 消息弹窗
  const NotifyRef = ref<any>(null)
  const { showNotify } = useNotify(NotifyRef)

  onLoad(() => {
    toPage(1)
  })

  const tabIndex = ref(1)
  const useTabs = () => {
    const tabsList = computed(() => {
      return [
        {
          name: '未交账金额',
          tiem: taskInfo.value.wait_money || 0,
          img: '/package_tms/static/icon/icon9.png',
          id: 1
        },
        {
          name: '已交账金额',
          tiem: taskInfo.value.check_money || 0,
          img: '/package_tms/static/icon/icon8.png',
          id: 2
        }
      ]

    })

    return {
      tabsList
    }
  }
  const { tabsList } = useTabs()
  const toPage = (id : number) => {
    tabIndex.value = id
    paging.value?.reload()
  }

  const paging = ref<ZPagingInstance>()
  const useCURD = () => {
    const taskInfo = ref({})
    const dataList = ref([])
    
    // 日期查询
    const start_time = ref(getPastTimestamp(6))
    const end_time = ref(new Date().getTime())
    const maxDate = new Date().getTime()
    const getList : ZPagingEvent.Query = async (page, limit) => {
      const params = { page, limit, is_account: tabIndex.value }
      try {
        const res = await accountList(params)
        taskInfo.value.wait_money = res.data.wait_money
        taskInfo.value.check_money = res.data.check_money

        paging.value?.complete([...res.data.data])
      } catch (err) {
        showNotify({
          type: 'error',
          message: err.msg
        })
        paging.value?.complete(false)
      }
    }

    const searchAction = () => {
      paging.value?.reload()
    }

    return {
      taskInfo,
      dataList,
      start_time,
      end_time,
      maxDate,
      getList,
      searchAction
    }
  }
  const { taskInfo, dataList, getList, searchAction, start_time, end_time, maxDate } = useCURD()
</script>


<template>
  <z-paging ref="paging" v-model="dataList" @query="getList" bg-color="rgba(242, 243, 245, 1)">
    <template #top>
      <view class="content-header">
        <view class="header-box">
          <view :class="tabIndex == item.id ? 'header-box1' : 'header-box2'" v-for="(item, index) in tabsList"
            :key="index" @tap="toPage(item.id)">
            <view class="header-left">
              <image style="width: 80rpx;height: 80rpx;" :src="item.img"></image>
            </view>
            <view class="header-right">
              <view class="right-name">{{item.name}}</view>
              <view class="right-text">{{item.tiem}}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="content-name">
        <text>明细</text>
        <up-row gutter="10">
          <up-col span="5">
            <up-datetime-picker v-model="start_time" hasInput :maxDate="maxDate" mode="date"></up-datetime-picker>
          </up-col>
          <up-col span="5">
            <up-datetime-picker v-model="end_time" hasInput :maxDate="maxDate" mode="date"></up-datetime-picker>
          </up-col>
          <up-col span="2">
            <up-button text="查询" type="primary" @click="paging?.reload"></up-button>
          </up-col>
        </up-row>
      </view> -->
    </template>
    <view class="main">
      <view class="content-box" v-for="(item,index) in dataList" :key="index">
        <view class="box-header">
          <view class="header-name">{{item.store.store_name}}</view>
          <view class="header-text">￥{{item.sign_amount}}</view>
        </view>
        <view class="box-line"></view>
		<view class="box-word">订单编号：<span style="color: rgba(2, 14, 36, 1);">{{item.sign_order_no}}</span>
		</view>
        <view class="box-word">签收日期：<span style="color: rgba(2, 14, 36, 1);">{{item.create_time}}</span>
        </view>
        <!-- <view class="box-word">订单日期：<span style="color: rgba(2, 14, 36, 1);">{{item.order_time}}</span>
        </view> -->
      </view>
    </view>
    <up-notify ref="NotifyRef"></up-notify>
  </z-paging>
</template>

<style scoped lang="scss">
  .content-header {
    width: 100%;
    height: 200rpx;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;

    .header-box {
      display: flex;
      width: 702rpx;
      height: 132rpx;
      border-radius: 12rpx;
      background: rgba(242, 243, 245, 1);
      box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);

      .header-box1 {
        flex: 1;
        height: 132rpx;
        border-radius: 12rpx;
        background: rgba(15, 127, 255, 1);
        box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);
        padding: 30rpx;
        box-sizing: border-box;

        .header-left {
          display: inline-block;
          margin-right: 20rpx;
        }

        .header-right {
          display: inline-block;

          .right-name {
            font-size: 28rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 10rpx;
          }

          .right-text {
            font-size: 32rpx;
            font-weight: 700;
            color: rgba(255, 255, 255, 1);
          }
        }
      }

      .header-box2 {
        flex: 1;
        height: 132rpx;
        border-radius: 12rpx;
        padding: 30rpx;
        box-sizing: border-box;

        .header-left {
          display: inline-block;
          margin-right: 20rpx;
        }

        .header-right {
          display: inline-block;

          .right-name {
            font-size: 28rpx;
            font-weight: 500;
            color: rgba(100, 101, 102, 1);
            margin-bottom: 10rpx;
          }

          .right-text {
            font-size: 32rpx;
            font-weight: 700;
            color: rgba(2, 14, 36, 1);
          }
        }
      }
    }
  }

  .content-name {
    font-size: 28rpx;
    font-weight: 700;
    color: rgba(2, 14, 36, 1);
    margin: 40rpx 0rpx 40rpx 30rpx;
  }

  .main {
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom);

    .content-box {
      width: 100%;
      height: 214rpx;
      background: rgba(255, 255, 255, 1);
      padding: 30rpx;
      box-sizing: border-box;
      margin-bottom: 30rpx;

      .box-header {
        display: flex;
        justify-content: space-between;

        .header-name {
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(2, 14, 36, 1);
        }

        .header-text {
          font-size: 32rpx;
          font-weight: 400;
          color: rgba(245, 99, 81, 1);
        }

      }

      .box-line {
        width: 702rpx;
        height: 2rpx;
        background: rgba(0, 0, 0, 0.1);
        margin: 20rpx auto;
      }

      .box-word {
        font-size: 24rpx;
        font-weight: 500;
        color: rgba(100, 101, 102, 1);
        margin-bottom: 20rpx;
      }
    }
  }
</style>